﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <title>各指标明细</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../Scripts/crypto-js.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: repeat-y;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      height: 40px;
      color: #fff;
      font-weight: bold;
      text-align: left;
      font-size: 18px;
      position: absolute;
      top: 20px;
      left: 15px;
      line-height: 40px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-body {
      padding: 5px 15px;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .layui-table-cell {
      text-align: center;
      color: #fff;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-view {
      margin-top: 0px;
    }

    .layui-table-header {
      background-color: transparent !important;
    }

    .layui-table-header .layui-table-cell {
      color: rgb(60, 176, 255);
      font-size: 20px;
      font-family: '微软雅黑';
      font-weight: bold;
    }

    .layui-table tr:hover {
      background-color: transparent !important;
    }

    .layui-table thead tr {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span {
      color: #fff;
    }

    .layui-laypage .layui-laypage-skip {
      color: #fff;
    }

    .layui-table-body .layui-none {
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px; margin-bottom: 10px;">
    <div class="layui-col-md12">
      <div id="header">
      </div>
    </div>
  </div>

  <div id="title">
  </div>

  <form class="layui-form" action="">

    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/问题总数.png" height="30" alt="" />
              <span class="type"></span>指标维护
            </div>
            <div class="layui-card-body">
              <table class="layui-table" id="grid" lay-data="{text:{ none: '暂无相关数据'}}" lay-filter="grid">
              </table>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/问题总数.png" height="30" alt="" />
              <span class="type"></span>指标点检问题
            </div>
            <div class="layui-card-body">
              <table class="layui-table" id="grid2" lay-data="{text:{ none: '暂无相关数据'}}" lay-filter="grid2">
              </table>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/问题总数.png" height="30" alt="" />
              <span class="type"></span>管理者标准作业
            </div>
            <div class="layui-card-body">
              <table class="layui-table" id="grid3" lay-data="{text:{ none: '暂无相关数据'}}" lay-filter="grid3">
              </table>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </form>
  <!-- 页眉区域 end-->
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {
      layui.use(['form', 'layer', 'table'], function () {
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;

        //解密方法
        function Decrypt(source) {
          var key = CryptoJS.enc.Utf8.parse("12345678900000001234567890000000"); //32位
          var iv = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
          var encryptedHexStr = CryptoJS.enc.Hex.parse(source);
          var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
          var decrypt = CryptoJS.AES.decrypt(srcs, key, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
          });
          var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
          return decryptedStr.toString();
        }

        var grid = null;

        $("#header").text(Decrypt(layui.url().search.type) + ' - ' + Decrypt(layui.url().search.itemname));
        $("#title").text(Decrypt(layui.url().search.workcenter) + ' -- ' + Decrypt(layui.url().search.itemname) + '明细');

        var index = layer.load(0, { shade: [0.2, '#000'], time: 100 * 1000 });

        //指标维护
        table.render({
          elem: '#grid'
          , url: "../handler/board/SQCDPDetails.ashx"
          , method: 'POST'
          , cols: [[
            { type: 'numbers', title: '序号', width: 80 }
            , { field: 'PLANMONTH', title: '月份', width: 80 }
            , {
              field: 'COMPLETEDATE', title: '日期',
              templet: function (d) {
                return d.COMPLETEDATE.split('T')[0];
              }
            }
            , { field: 'ITEMNAME', title: '指标项名称' }
            , { field: 'PLANVALUE', title: '计划值' }
            , { field: 'SAFEVALUE', title: '安全值' }
            , { field: 'ACTUALVALUE', title: '实际值' }
            , { field: 'WORKCENTERNAME', title: '工区' }
            , {
              field: 'STATUS', title: '状态', style: 'color:#fff;', width: 100,
              templet: function (d) {
                if (d.STATUS == '未提交') {
                  return '<span style="background-color: rgb(255,0,0);padding:5px;border-radius:3px;">' + d.STATUS + '</span>'
                } else if (d.STATUS == '存在问题') {
                  return '<span style="background-color: rgb(255,255,0);padding:5px;color:#000;border-radius:3px;">' + d.STATUS + '</span>'
                } else {
                  return '<span style="background-color: rgb(0,255,0);padding:5px;color:#000;border-radius:3px;">' + d.STATUS + '</span>'
                }
              }
            }
          ]]
          , where: {
            type: 'GetZhiBiaoMaint',
            itemname: Decrypt(layui.url().search.itemname),
            workcenter: Decrypt(layui.url().search.workcenter)
          }
          , text: {
            none: '暂无相关数据'
          }
          , request: {
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
          }
          , page: {
            theme: '#009688'
          }
          , limit: 5
          , limits: [5, 10, 20, 30, 50]
          , done: function (res, curr, count) {
            layer.close(index);
            var that = this.elem.next();
            res.data.forEach(function (item, index) {
              if (index % 2 !== 0) {
                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css({ "background": "rgba(60, 176, 255, 0.3)" });
              }
            });
          }
        });

        //指标点检问题上报
        table.render({
          elem: '#grid2'
          , url: "../handler/board/SQCDPDetails.ashx"
          , method: 'POST'
          //, loading: false
          , cols: [[
            { type: 'numbers', title: '序号', width: 80 }
            , { field: 'PLANMONTH', title: '月份', width: 80 }
            , { field: 'ITEMNAME', title: '指标名称' }
            , { field: 'DESCRIPTION', title: '点检问题' }
            , {
              field: 'UFCCREATEDATE', title: '提出日期',
              templet: function (d) {
                return d.UFCCREATEDATE.split('T')[0];
              }
            }
            , { field: 'RESWORKCENTERNAME', title: '责任单位' }
            , { field: 'UFCRESULT', title: '处理结果' }
            , {
              field: 'UFCCHULIDATE', title: '要求节点',
              templet: function (d) {
                if (d.UFCCHULIDATE === null) {
                  return "";
                } else {
                  return d.UFCCHULIDATE.split('T')[0];
                }
              }
            }
            , {
              field: 'UFCWANCHENGDATE', title: '实际完成日期',
              templet: function (d) {
                if (d.UFCWANCHENGDATE === null) {
                  return "";
                } else {
                  return d.UFCWANCHENGDATE.split('T')[0];
                }
              }
            }
            , { field: 'DATAFROM', title: '来源' }
            , {
              field: 'UFCSTATUS', title: '状态', width: 100,
              templet: function (d) {
                if (d.UFCSTATUS == '未处理') {
                  return '<span style="background-color: rgb(255,0,0);padding:5px;border-radius:3px;">' + d.UFCSTATUS + '</span>'
                } else if (d.UFCSTATUS == '已完成') {
                  return '<span style="background-color: rgb(0,255,0);padding:5px;color:#000;border-radius:3px;">' + d.UFCSTATUS + '</span>'
                } else {
                  // 处理完
                  return '<span style="background-color: #00ff7f;padding:5px;color:#000;border-radius:3px;">' + d.UFCSTATUS + '</span>'
                }
              }
            }
          ]]
          , where: {
            type: 'GetProblem',
            itemname: Decrypt(layui.url().search.itemname),
            workcenter: Decrypt(layui.url().search.workcenter)
          }
          , text: {
            none: '暂无相关数据'
          }
          , request: {
            pageName: 'page',
            limitName: 'rows'
          }
          , page: {
            theme: '#009688'
          }
          , limit: 5
          , limits: [5, 10, 20, 30, 50]
          , done: function (res, curr, count) {
            layer.close(index);
            var that = this.elem.next();
            res.data.forEach(function (item, index) {
              if (index % 2 !== 0) {
                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css({ "background": "rgba(60, 176, 255, 0.3)" });
              }
            });
          }
        });

        //管理者标准作业
        table.render({
          elem: '#grid3'
          , url: "../handler/board/SQCDPDetails.ashx"
          , method: 'POST'
          //, loading: false
          , cols: [[
            { type: 'numbers', title: '序号', width: 80 }
            , { field: 'PLANMONTH', title: '月份', width: 80 }
            , { field: 'ITEMNAME', title: '指标名称' }
            , { field: 'WORKCENTERNAME', title: '责任单位' }
            , {
              field: 'COMPLETEDATE', title: '创建时间',
              templet: function (d) {
                if (d.COMPLETEDATE === null) {
                  return "";
                } else {
                  return d.COMPLETEDATE.split('T')[0];
                }
              }
            }
            , {
              field: 'STATUS', title: '状态', style: 'color:#fff;', width: 100,
              templet: function (d) {
                if (d.STATUS == '未完成') {
                  return '<span style="background-color: rgb(255,0,0);padding:5px;border-radius:5px;">' + d.STATUS + '</span>'
                } else {
                  return '<span style="background-color: rgb(0,255,0);padding:5px;color:#000;border-radius:5px;">' + d.STATUS + '</span>'
                }
              }
            }
          ]]
          , where: {
            type: 'GetGuanBiao',
            itemname: Decrypt(layui.url().search.itemname),
            workcenter: Decrypt(layui.url().search.workcenter)
          }
          , text: {
            none: '暂无相关数据'
          }
          , request: {
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
          }
          , page: {
            theme: '#009688'
          }
          , limit: 5
          , limits: [5, 10, 20, 30, 50]
          , done: function (res, curr, count) {
            layer.close(index);
            var that = this.elem.next();
            res.data.forEach(function (item, index) {
              if (index % 2 !== 0) {
                var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css({ "background": "rgba(60, 176, 255, 0.3)" });
              }
            });
          }
        });

      });
    });
  </script>
</body>

</html>